<template>
  <div class="timestamp-converter-page">
    <div class="converter-container">
      <h1>Unix时间互转</h1>
      <el-form>
        <el-form-item label="Unix时间戳">
          <el-input 
            v-model="timestamp" 
            placeholder="请输入Unix时间戳"
            class="timestamp-input"
          />
        </el-form-item>

        <el-form-item>
          <el-radio-group v-model="timestampType">
            <el-radio :label="10">10位时间戳（秒）</el-radio>
            <el-radio :label="13">13位时间戳（毫秒）</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="convertTimestamp">
            <el-icon><Timer /></el-icon>
            转换
          </el-button>
        </el-form-item>

        <el-form-item label="转换结果">
          <el-input 
            v-model="convertedTime" 
            readonly
            class="result-input"
          />
        </el-form-item>

        <el-divider>
          <el-icon><Switch /></el-icon>
        </el-divider>

        <el-form-item label="日期时间">
          <el-date-picker
            v-model="dateTime"
            type="datetime"
            placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="datetime-picker"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="convertDateTime">
            <el-icon><Timer /></el-icon>
            转换
          </el-button>
        </el-form-item>

        <el-form-item label="转换结果">
          <el-input 
            v-model="convertedTimestamp" 
            readonly
            class="result-input"
          />
        </el-form-item>

        <div class="button-group">
          <el-button type="warning" @click="goToHomepage">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
          <el-button @click="getCurrentTime">
            <el-icon><Clock /></el-icon>
            当前时间
          </el-button>
        </div>
      </el-form>

      <div class="notes">
        <h3>说明：</h3>
        <ul>
          <li><strong>10位时间戳：</strong>以秒为单位，例如：1635724800</li>
          <li><strong>13位时间戳：</strong>以毫秒为单位，例如：1635724800000</li>
          <li>Unix时间戳是从1970年1月1日（UTC/GMT）开始所经过的秒数</li>
          <li>常用于数据库和编程中的时间存储和计算</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Timer, Back, Switch, Clock } from '@element-plus/icons-vue'

const router = useRouter()
const timestamp = ref('')
const timestampType = ref(10)
const convertedTime = ref('')
const dateTime = ref('')
const convertedTimestamp = ref('')

const convertTimestamp = () => {
  if (!timestamp.value) {
    ElMessage.warning('请输入Unix时间戳')
    return
  }

  try {
    const ts = parseInt(timestamp.value)
    const date = new Date(timestampType.value === 10 ? ts * 1000 : ts)
    
    if (isNaN(date.getTime())) {
      throw new Error('Invalid timestamp')
    }
    
    convertedTime.value = date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    })
    ElMessage.success('转换成功')
  } catch (error) {
    ElMessage.error('时间戳格式不正确')
  }
}

const convertDateTime = () => {
  if (!dateTime.value) {
    ElMessage.warning('请选择日期时间')
    return
  }

  try {
    const date = new Date(dateTime.value)
    if (timestampType.value === 10) {
      convertedTimestamp.value = Math.floor(date.getTime() / 1000)
    } else {
      convertedTimestamp.value = date.getTime()
    }
    ElMessage.success('转换成功')
  } catch (error) {
    ElMessage.error('日期时间格式不正确')
  }
}

const getCurrentTime = () => {
  const now = new Date()
  dateTime.value = now.toISOString().slice(0, 19).replace('T', ' ')
  convertDateTime()
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.timestamp-converter-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .converter-container {
    max-width: 800px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .el-form {
      .el-form-item {
        margin-bottom: 25px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #4a5568;
          padding-bottom: 8px;
        }

        .timestamp-input,
        .result-input {
          font-family: 'Monaco', 'Courier New', monospace;
        }

        .datetime-picker {
          width: 100%;
        }

        .el-radio-group {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;

          .el-radio {
            margin: 0;
          }
        }
      }
    }

    .el-divider {
      margin: 30px 0;
      
      :deep(.el-divider__text) {
        background-color: transparent;
        
        .el-icon {
          font-size: 24px;
          color: #409EFF;
        }
      }
    }

    .button-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 30px;

      .el-button {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 12px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          strong {
            color: #409EFF;
            display: inline-block;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .timestamp-converter-page {
    padding: 10px;

    .converter-container {
      padding: 20px;
      width: 100%;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .el-form {
        .el-form-item {
          margin-bottom: 20px;

          .el-radio-group {
            flex-direction: column;
            gap: 10px;
          }
        }
      }

      .button-group {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
          margin: 0;
        }
      }

      .notes {
        padding: 15px;
        margin-top: 30px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
